<template>
  <div>

    <div id="emailForm">
      <h1 style="text-align: center;color: #00CC00;">联系我们</h1>
      <h3 style="color: #63A35C;">爱家电商客户支持中心服务于全国的最终客户和授权服务商。<br />
        我们提供在线技术支持、供求查询、投诉受理、信息咨询等全方位的一站式服务，请给发送邮件联系我们。<br />
        谢谢您的支持。</h3>
      <hr />
      <hr />
      <hr />
      <hr />
      <div style="border: 1px solid #000000;" class="bzbz">
        <table>
          <tr>
            <h4>姓名:</h4>
            <td><input type="text" v-model="email.username"></td>
          </tr>
          <tr>
            <h4>手机号:</h4>
            <td><input type="number" v-model="email.phone"></td>
          </tr>
          <tr>
            <h4>邮箱:</h4>
            <td><input type="text" v-model="email.toEmail"></td>
          </tr>
          <tr>
            <h4>所在城市:</h4>
            <td><input type="text" v-model="email.inAddr"></td>
          </tr>
          <tr>
            <h4>备注:</h4>
            <td><input type="text" v-model="email.bz"></td>
          </tr>
          <tr>
            <h4>联系地址:</h4>
            <td><input type="text" v-model="email.addr"></td>
          </tr>
          <tr>
            <h4>具体内容:</h4>
          </tr>
        </table>
        <textarea v-model="email.content" style="width: 976px;height: 500px;"></textarea>
        <div align="center"><button class="sub" @click="sub">提交</button>
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          <button class="back" @click="back">返回</button>
        </div>
      </div>





    </div>

  </div>
</template>


<script>
  import {
    Descriptions
  } from 'ant-design-vue'

  export default {
    components: {
      'a-descriptions': Descriptions,
      'a-descriptions-item': Descriptions.Item
    },
    data() {
      return {
        email:{
          username: "",
          phone: "",
          toEmail:"",
          inAddr: "",
          bz: "",
          addr: "",
          content: ""
        }
      }
    },
    methods: {
      back(){
        this.$router.push("/home")
      },
      async sub(){
        let{data:rsp}=await this.$http.post("/aj-email",this.email)
        alert(rsp)
      }
    }
  }
</script>

<style>
  #emailForm {
    width: 980px;
    margin: 0 auto;
  }

  .bzbz {
    font-size: 30px;
  }

  .bzbz input[type=text],
  input[type=number] {
    text-align: center;
    margin-left: 250px;
    width: 400px;
    height: 33px;
  }

  .bzbz h4 {
    color: #8a8a8a;
  }

  .bzbz textarea {
    color: #5d656a;
    font-size: 20px;
    font-family:"微软雅黑";
  }

  .sub {
    width: 100px;
    height: 30px;
    border: 1px solid #5bb39d;
    background-color: coral;
    color: white;
  }

  .back {
    width: 100px;
    height: 30px;
    border: 1px solid #5bb39d;
    background-color: coral;
    color: white;
  }
</style>
